<template>
  <div>
    <el-card style="margin:20px;">
      <el-row>
        <h3>{{ type }}学生</h3>
      </el-row>
      <el-form :model="greatStudent" :rules="studentFormRules" ref="studentRef">
        <el-form-item prop="greatStuname" label="明星姓名">
          <el-input placeholder="明星姓名" v-model="greatStudent.greatStuname">
            <template slot="prepend">明星姓名</template>
          </el-input>
        </el-form-item>

        <el-form-item prop="greatStutype" label="明星类型">
          <el-select placeholder="明星类型" v-model="greatStudent.greatStutype"
                     :label="greatStudent.greatStutype == 0 ?'就业明星':'创业明星' ">
            <el-option
                v-for="(item,index) in stuType"
                :key="index"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="greatSchool" label="毕业院校">
          <el-input placeholder="毕业院校" v-model="greatStudent.greatSchool">
          </el-input>
        </el-form-item>

        <el-form-item prop="greatProfession" label="专业名">
          <el-input placeholder="专业名" v-model="greatStudent.greatProfession">
          </el-input>
        </el-form-item>

        <el-form-item prop="greatCompany" label="就业企业">
          <el-input placeholder="就业企业" v-model="greatStudent.greatCompany">
          </el-input>
        </el-form-item>

        <el-form-item prop="greatPost" label="就业岗位">
          <el-input placeholder="就业岗位" v-model="greatStudent.greatPost">
          </el-input>
        </el-form-item>
        <el-form-item label="毕业感言" prop="greatWords">
          <el-input
              type="textarea"
              :rows="4"
              placeholder="毕业感言"
              v-model="greatStudent.greatWords">
          </el-input>
        </el-form-item>
        <!-- 学生头像： -->
        <el-form-item label="学生头像">
          <!-- 头衔缩略图 -->
          <pan-thumb :image="greatStudent.greatBigimg === undefined ? defaultImg : greatStudent.greatBigimg"/>
          <!-- 文件上传按钮 -->
          <el-button type="primary" icon="el-icon-upload" @click="imageCropperShow=true">
            上传头像
          </el-button>
          <!--
            v-show：是否显示上传组件
            :key：类似于id，如果一个页面多个图片上传控件，可以做区分
            :url：后台上传的url地址
            @close：关闭上传组件
            @crop-upload-success：上传成功后的回调
            <input type="file" name="file"/>

          -->
          <image-cropper
              v-show="imageCropperShow"
              :width="300"
              :height="300"
              :key="imageCropperKey"
              :url="BASE_API"
              field="file"
              @close="close"
              @crop-upload-success="cropSuccess"/>
        </el-form-item>
        <el-form-item>
          <el-button
              type="primary"
              @click="submitStudent"
          >提交
          </el-button
          >
        </el-form-item>
      </el-form>

    </el-card>
  </div>
</template>

<script>
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
import {reqSaveStudent} from "@/api/student";

export default {
  created() {
    /*判断当前是添加学生还是修改学生*/
    if (this.$route.params.id) {
      this.getStudentById(this.$route.params.id)
    }
  },
  name: "addStudent",
  data() {
    return {
      //明星类型
      stuType: [{label: "就业明星", value: 0}, {label: "创业明星", value: 1}],
      //学生对象
      greatStudent: {},
      //控制图片缩略图是否显示
      imageCropperShow: false,
      //上传组件的唯一标识
      imageCropperKey: 0,
      //服务器的地址与端口号
      BASE_API: 'http://localhost:8001/cykj/fileOss',
      //默认头像
      defaultImg: "https://meng-edu1010.oss-cn-beijing.aliyuncs.com/2-2.png",
      studentFormRules: {
        greatStuname: [{required: true, message: '请填写学生姓名', trigger: 'blur'}],
        greatSchool: [{required: true, message: '请填写学生学校', trigger: 'blur'}],
        greatProfession: [{required: true, message: '请填写学生专业', trigger: 'blur'}],
        greatCompany: [{required: true, message: '请填写学生入职公司', trigger: 'blur'}],
        greatPost: [{required: true, message: '请填写学生入职岗位', trigger: 'blur'}],
        greatWords: [{required: true, message: '请填写学生毕业感言', trigger: 'blur'}],
      },
    }
  },
  methods: {
    //头像上传成功的回调的方法
    cropSuccess(data) {
      this.$message.success("上传成功")
      this.imageCropperShow = false
      //上传之后接口返回图片地址
      this.greatStudent.greatBigimg = data.url
      this.imageCropperKey = this.imageCropperKey + 1
    },
    //关闭文件上传弹窗的方法
    close() {
      this.imageCropperShow = false
      //上传组件初始化
      this.imageCropperKey = this.imageCropperKey + 1
    },
    //根据id查询学生
    async getStudentById(id) {
      const result = await this.$http.student.reqGetStudentById(id)
      if (result.code !== 200) return this.$message.error(result.message)
      this.greatStudent = result.data.student
    },
    //添加学生
    saveStudent() {
      //validate();接受一个回调函数拿到表单的验证结果
      this.$refs.studentRef.validate(async valid => {
        // 返回校验结果的布尔值
        // console.log(valid);
        if (!valid) return this.$message.error('请填写完整的学生信息');
        let result = await this.$http.student.reqSaveStudent(this.greatStudent)
        //成功发送请求
        if (result.code !== 200) return this.$message.error("添加失败")
        this.$message.success('添加成功')
        this.$router.push("/student/manage")
      })
    },
    //提交修改后的学生资料
    editStudent() {
      this.$refs.studentRef.validate(async valid => {
        // 返回校验结果的布尔值
        // console.log(valid);
        if (!valid) return this.$message.error('请填写完整的学生信息');
        let result = await this.$http.student.reqEditStudent(this.greatStudent)
        if (result.code !== 200) return this.$message.error(result.message)
        this.$message.success('修改成功')
        this.$router.push("/student/manage")
      })
    },
    //提交学生资料
    submitStudent() {
      if (this.$route.params.id) {
        this.editStudent()
      } else {
        this.saveStudent()
      }

    }
  },
  components: {
    ImageCropper,
    PanThumb

  },
  computed: {
    type() {
      return this.$route.params.id !== undefined ? '编辑' : "添加"
    }
  }
}
</script>

<style scoped>
.el-input {
}

.el-form {
  margin: 0 auto;
}
</style>
